<!DOCTYPE html>
<html lang="en">
	<head accesskey="*">
		<meta charset="utf-8">
		<script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
		<link href="libs/css/bucket.css" rel="stylesheet">
		<style>
			#pingCoord {
				position: absolute;
				top: 10px;
				left: 12px;
				z-index: 6;
			}
		</style>
	</head>
	<body>
		<div id="cesiumContainer" style="width: 100%; height:100%"></div>
		<div id="pingCoord"></div>
		<script>
			// Grant CesiumJS access to your ion assets
			Cesium.Ion.defaultAccessToken =
				'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYzllNDhmYS1kNzE1LTRhOWUtOWIzZS1kMmU4ODhiNGQ2NTEiLCJpZCI6MTIxODIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA0OTQ5ODZ9.VJPGTRjjplXV5xPgr6AFOjIN6xy-ymdxoZDsPWc2T0Q';
			var viewer = new Cesium.Viewer('cesiumContainer');

			var imageryLayer = viewer.imageryLayers.addImageryProvider(
				new Cesium.IonImageryProvider({
					assetId: 4
				})
			);

			var layers = viewer.scene.imageryLayers;

			layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
				url: 'static/imgs/Cesium_Logo_overlay.png',
				rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
			}));
			
          viewer.camera.setView({
              // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
              // fromDegrees()方法，将经纬度和高程转换为世界坐标
              destination:Cesium.Cartesian3.fromDegrees(104.06,30.64,349990),
              orientation:{
                // 指向
                //heading:Cesium.Math.toRadians(90,0),
                // 视角
                pitch:Cesium.Math.toRadians(-90),
                roll:0.0
              }
            });
		
			
			const scene = viewer.scene;
			var canvas = scene.canvas;
			var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
			handler.setInputAction(function(movement) {
				var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
				var ellipsoid = scene.globe.ellipsoid;
				if (cartesian) { //能获取，显示坐标
					var cartographic = ellipsoid.cartesianToCartographic(cartesian);
					var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(2) + ', ' + '纬度' + Cesium.Math.toDegrees(
						cartographic.latitude).toFixed(2) + '高度 ' + Math.ceil(viewer.camera.positionCartographic.height); 
					document.getElementById('pingCoord').innerHTML = coords;
					document.getElementById('pingCoord').style.display = 'block';
				} else { //不能获取不显示
					document.getElementById('pingCoord').style.display = 'none';
				}
			}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
		</script>
	</body>
</html>
